
<template>
  <!-- 美团对账正常单    美团对账异常单 -->
  <div class="storeInfo">
    <div class="head">
      <el-form :model="form" class="headForm">
          <el-form-item label style="width:230px">
        <el-date-picker
          v-model="timepicker"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
        </el-form-item>
        <el-form-item label style="width:105px">
          <el-input v-model="form.search" placeholder="商品名称/条码"></el-input>
        </el-form-item>

        <!-- <el-form-item label style="width:105px">
          <el-select v-model="form.status" placeholder="上下架">
            <el-option
              v-for="(item,a) in shelf"
              :key="a"
              :label="item.status_cn"
              :value="item.status"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label style="width:105px">
          <el-select v-model="form.operate_type" placeholder="出入库">
            <el-option
              v-for="(item,a) in inOut"
              :key="a"
              :label="item.status_cn"
              :value="item.status"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label style="width:105px">
          <el-select v-model="form.operate" placeholder="操作类型">
            <el-option
              v-for="(item,a) in type"
              :key="a"
              :label="item.status_cn"
              :value="item.status"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- operate  操作类型 -->

        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="danger" icon="el-icon-search" @click="back">返回</el-button>
        <el-button type="success" icon="el-icon-search" @click="exportFn">导出数据</el-button>
      </el-form>
    </div>
    <!-- <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p> -->
    <!-- table -->
    <div class="tabContainer_SI tabContainer">
      <el-table :data="tableData" stripe style="width: 100%;text-align:center">
        <!-- 商品编号	商品名称	变化	入库单	操作	类型	剩余库存	操作时间	操作人	备注				 -->
        <el-table-column prop="item_id" label="商品编号" fixed></el-table-column>
        <el-table-column prop label="商品名称" width="300px">
          <template slot-scope="scope">
            <div style="display:flex;align-items:center;">
              <img :src="scope.row.item_image" alt style="width:50px;height:50px;margin-right:5px" />
              <span>{{scope.row.item_name}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="change_stock" label="变化"></el-table-column>
        <el-table-column prop="" label="入库单">
            <template slot-scope="scope">
                <p v-if="scope.row.bill_image == ''">--</p>
                <p v-else><img :src="scope.row.bill_image" alt=""></p>
            </template>
        </el-table-column>
        
        <el-table-column prop="operate_cn" label="操作"></el-table-column>
        <el-table-column prop="operate_type_cn" label="类型"></el-table-column>
        <el-table-column prop="snap_stock" label="剩余库存"></el-table-column>
        <el-table-column prop="create_time" label="操作时间" width="180px"></el-table-column>
        <el-table-column prop="operate_user" label="操作人"></el-table-column>
        <el-table-column label="备注" prop="intro" width="200px"></el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      @current-change="changePage"
      :page-size="size"
      :current-page.sync="pageNum"
      :hide-on-single-page="true"
      :total="total"
    >{{total}}</el-pagination>
  </div>
</template>

<script>
import Vue from "vue";
import { abc } from "../../../../js/abc.js";
import { potUrl } from "../../../../js/config_url.js";
export default {
  data() {
    return {
      searchparams: "",
      tableData: [],
      total: 50,
      size: 20,
      form: { size: 20, page: 1 },
      pageNum: 1,
      shelf: [
        { status: "", status_cn: "全部状态" },
        { status: "1", status_cn: "上架" },
        { status: "0", status_cn: "下架" }
      ],
      inOut: [
        { status: "", status_cn: "出入库" },
        { status: "1", status_cn: "入库" },
        { status: "0", status_cn: "出库" }
      ],
      timepicker: [],
      type:[
            {status:"0",status_cn:"订单出库"},
            {status:"1",status_cn:"客存取出"},
            {status:"2",status_cn:"客遗存入"},
            {status:"3",status_cn:"客存存入"},
            {status:"4",status_cn:"采购入库"},
            {status:"5",status_cn:"退单入库"},
            {status:"6",status_cn:"修正入库"},
            {status:"7",status_cn:"修正出库"},
            {status:"8",status_cn:"VIP充值出库"},
            {status:"9",status_cn:"VIP充值入库"},
            {status:"10",status_cn:"商品替换出库"},
            {status:"11",status_cn:"商品替换入库"}
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },


    };
  },
  mounted() {
    let that = this;
    console.log(that.$route.params)
    that.form.item_id = that.$route.params.item_id;
    that.form.status = that.$route.params.status;
    that.getList();
  },
  methods: {
    search() {
      let that = this;
      //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
      console.log(that.timepicker)
      that.form.start_time = that.timepicker[0]
      that.form.end_time = that.timepicker[1];
      that.getList();
    },
    changePage(val) {
      var that = this;
      that.pageNum = val;
      that.form.page = val;
      that.getList();
    },
    getList() {
      let that = this;
      abc.get(that, potUrl.stockdetail, that.form, res => {
        that.tableData = res.data.list;
        that.total = res.data.total;
      }); //列表
    },
    back(){
        this.$router.push('/storageIn')
    },
    exportFn(){
http://store.api.pre.meiktv.com/v1/stock/exportDetail?token=6fac807a8f86e5a68619eb01a7466c43&user_id=6&store_id=1&platform=operate&start_time=undefined&end_time=undefined&operate_type=undefined&operate=undefined&status=1&search=undefined&item_id=1923&platform=operate


        const that = this;
        let start_time = that.form.start_time == undefined?'':that.form.start_time;
        let end_time = that.form.end_time == undefined?'':that.form.end_time;
        let operate_type = that.form.operate_type == undefined?null:that.form.operate_type;
        let operate = that.form.operate == undefined?null:that.form.operate;
        let search = that.form.search == undefined?'':that.form.search;
        let exportUrl = abc.hostUrl + potUrl.stockexportDetail + abc.getSession('params')+ '&start_time=' + start_time + '&end_time=' + end_time +
        '&operate_type=' + operate_type + '&operate=' + operate + '&status=' + that.form.status + '&search=' + search + '&item_id=' + that.form.item_id
        alert(exportUrl)
        window.location.href = exportUrl;
    }
  }
};
</script>
